import React from 'react'

import {Empty, message} from "antd"
import {ClockCircleOutlined} from "@ant-design/icons"
import {getGameData} from "../../../utils/api/home"

import "./index.scss"

/**
 * Game组件
 */
export default class HomeGame extends React.Component {
    state = {
        list: []
    }

    // TODO game articleClick button
    // 文章点击的点击回调
    articleClickHandler = (article) => {
        message.success(`切换文章: ${article}`, 1.5)
        this.props.router.history.push(`/article/${article}`)
    }

    render() {
        return (
            <div className="s-homegame">
                <div className="s-homegame-title">
                    <h2 className="title-msg">游戏</h2>
                    <span className="subtitle-msg">NO GAME NO LIFE</span>
                </div>
                <div className="s-homegame-classify">
                    <div className="s-homegame-classify-item">
                        <span>全部</span>
                    </div>
                </div>
                <div className="s-homegame-box">
                    {
                        this.state.list.length > 0 ? (
                            this.state.list.map((item, index) => (
                                <div className="s-homegame-box-item" key={item.id} onClick={() => this.articleClickHandler(item.article)}>
                                    <img src={item.imgUrl} alt="" />
                                    <div className="item-info">
                                        <div className="item-label">
                                            <ClockCircleOutlined />
                                            &nbsp;
                                            <span>{item.label}</span>
                                        </div>
                                        <h2 className="item-title">{item.title}</h2>
                                        <div className="item-author">
                                            <span className="author">{item.author}</span>
                                        </div>
                                    </div>
                                </div>
                            ))
                        ) : (
                            <div className="s-homegame-empty">
                                <h2>请求失败</h2>
                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                            </div>
                        )
                    }
                </div>
            </div>
        )
    }

    async componentDidMount() {

        // 获取数据

        let resp = await getGameData()
        this.setState({list: resp})
    }
}
